﻿
@using LeadThing.AbpZeroTemplate.Localization
@* 这里是通过ng的控制权去查找相对应的js信息。所有我们的没一个js文件就是单独的一个控制权。。。尼玛angular设计太爽了。。。 *@
<div ng-controller="common.views.areas.upPicture as vm">
    <div class="row margin-bottom-5">
        <div class="col-xs-6">
            <div class="page-head">
                <div class="page-title">
                    <h1>
                        <span style="cursor:pointer;" ng-click="vm.back()">@L("Area")</span> <small>@L("PictureManage")</small>
                    </h1>
                </div>
            </div>
        </div>
    </div>
    <div class="portlet light margin-bottom-0">
        <div class="portlet-body">
            <div busy-if="vm.loading">

                <div class="row">
                    <div class="col-md-3">
                        <h3>选择图片</h3>
                        <input type="file" nv-file-select="" uploader="uploader" multiple /><br />
                    </div>
                    <div class="col-md-9" style="margin-bottom: 40px">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th width="50%">图片名称</th>
                                    <th ng-show="uploader.isHTML5">图片大小</th>
                                    <th ng-show="uploader.isHTML5">进度</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="item in uploader.queue">
                                    <td><strong>{{ item.file.name }}</strong></td>
                                    <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
                                    <td ng-show="uploader.isHTML5">
                                        <div class="progress" style="margin-bottom: 0;">
                                            <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                                        <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                                        <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                                    </td>
                                    <td nowrap>
                                        <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                                            <span class="glyphicon glyphicon-upload"></span> 上传
                                        </button>
                                        <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
                                            <span class="glyphicon glyphicon-ban-circle"></span> 取消
                                        </button>
                                        <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
                                            <span class="glyphicon glyphicon-trash"></span> 删除
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr ng-repeat="item in vm.files">
                                    <td><strong>{{ item.title }}</strong></td>
                                    <td ng-show="uploader.isHTML5" nowrap>{{ item.size/1024/1024|number:2 }} MB</td>
                                    <td ng-show="uploader.isHTML5">
                                        <div class="progress" style="margin-bottom: 0;">
                                            <div class="progress-bar" role="progressbar" style="width:100%"></div>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <span><i class="glyphicon glyphicon-ok"></i></span>
                                    </td>
                                    <td nowrap>
                                        <button type="button" class="btn btn-danger btn-xs" ng-click="vm.deleteFiles(item)">
                                            <span class="glyphicon glyphicon-trash"></span> 删除
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div>
                            <div>
                                总进度:
                                <div class="progress" style="">
                                    <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
                                <span class="glyphicon glyphicon-upload"></span> 全部上传
                            </button>
                            <button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
                                    <span class="glyphicon glyphicon-ban-circle"></span> 全部取消
                                </button>
                            @*<button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
                                    <span class="glyphicon glyphicon-trash"></span> 全部删除
                                </button>*@
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>




